import React, { Component } from 'react'

import { Link } from 'react-router-dom'
import { Grid, Button, Toast, Modal } from 'antd-mobile-v2'
import { BASE_URL, isAuth, API, getToken, removeToken } from '../../utils'
import { withNavigation } from '../../utils/navigate'

import styles from './index.module.css'
const alert = Modal.alert;
// 菜单数据
const menus = [
  { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorate' },
  { id: 2, name: '我的出租', iconfont: 'icon-ind', to: '/rent' },
  { id: 3, name: '看房记录', iconfont: 'icon-record' },
  {
    id: 4,
    name: '成为房主',
    iconfont: 'icon-identity'
  },
  { id: 5, name: '个人资料', iconfont: 'icon-myinfo' },
  { id: 6, name: '联系我们', iconfont: 'icon-cust' }
]

// 默认头像
const DEFAULT_AVATAR = BASE_URL + '/img/profile/avatar.png'

/* 
  1 给退出按钮绑定单击事件，创建方法 logout 作为事件处理程序。
  2 导入 Modal 对话框组件（文档）。
  3 在方法中，拷贝 Modal 组件文档中确认对话框的示例代码。
  4 修改对话框的文字提示。
  5 在退出按钮的事件处理程序中，先调用退出接口（让服务端退出），再移除本地token（本地退出）。
  6 将登陆状态 isLogin 设置为 false。
  7 清空用户状态对象。
*/

class Profile extends Component {
  state = {
    // 判断是否登录
    isLogin: isAuth(),
    // 存放登录后的用户信息
    userInfo: {
      avatar: '',
      nickname: ''
    }
  }

  componentDidMount() {
    this.getUserInfo()
  }

  // 获取用户的信息
  async getUserInfo() {
    // const { navigate } = this.props
    if (!this.state.isLogin) {
      // 代表没有登录,不发送请求，渲染默认的页面就行
      return
    } else {
      // 发送请求，获取个人资料
      const { data: res } = await API.get(`/user`)
      if (res.status != 200) {
        // navigate('/login')
        this.setState({
          isLogin:false
        })
        return Toast.info(res.description, 2, null, false)
      } else {
        // 将用户信息存进userInfo
        const { avatar, nickname } = res.body
        this.setState({
          userInfo: {
            avatar: BASE_URL + avatar,
            nickname
          }
        })

      }
    }
  }

  // 退出登录
  logout = () => {
    alert('提示', '你确定要退出?', [
      { text: '取消' },
      {
        text: '退出', onPress: async () => {
          await API.post('/user/logout', null, {
            headers: {
              authorization: getToken()
            }
          })
          // 移除token
          removeToken()
          // 处理状态
          this.setState({
            isLogin: false,
            userInfo: {
              avatar: '',
              nickname: ''
            }
          })
        }
      },
    ])
  }

  render() {
    const { navigate } = this.props
    const { isLogin, userInfo: { avatar, nickname } } = this.state
    return (
      <div className={styles.root}>
        {/* 个人信息 */}
        <div className={styles.title}>
          <img
            className={styles.bg}
            src={BASE_URL + '/img/profile/bg.png'}
            alt="背景图"
          />
          <div className={styles.info}>
            <div className={styles.myIcon}>
              <img
                className={styles.avatar}
                src={avatar || DEFAULT_AVATAR}
                alt="icon"
              />
            </div>
            <div className={styles.user}>
              <div className={styles.name}>{nickname || '游客'}</div>
              {/* 登录后展示： */}

              {
                isLogin ? (
                  <>
                    <div className={styles.auth}>
                      <span onClick={this.logout}>退出</span>
                    </div>
                    <div className={styles.edit}>
                      编辑个人资料
                      <span className={styles.arrow}>
                        <i className="iconfont icon-arrow" />
                      </span>
                    </div>
                  </>
                ) : (
                  <div className={styles.edit}>
                    <Button
                      type="primary"
                      size="small"
                      inline
                      onClick={() => navigate('/login')}
                    >
                      去登录
                    </Button>
                  </div>
                )
              }



            </div>
          </div>
        </div>

        {/* 九宫格菜单 */}
        <Grid
          data={menus}
          columnNum={3}
          hasLine={false}
          renderItem={item =>
            item.to ? (
              <Link to={item.to}>
                <div className={styles.menuItem}>
                  <i className={`iconfont ${item.iconfont}`} />
                  <span>{item.name}</span>
                </div>
              </Link>
            ) : (
              <div className={styles.menuItem}>
                <i className={`iconfont ${item.iconfont}`} />
                <span>{item.name}</span>
              </div>
            )
          }
        />

        {/* 加入我们 */}
        <div className={styles.ad}>
          <img src={BASE_URL + '/img/profile/join.png'} alt="" />
        </div>
      </div>
    )
  }
}

export default withNavigation(Profile)